<template>
  <BasicModal
    @register="redEnvelopeModal"
    :title="`${t('modalForm.discountActivity.redRecord')} (${getName})`"
    :showCancelBtn="false"
    :showOkBtn="false"
    :width="1200"
  >
    <BasicTable @register="trdEnvelopeTable">
      <template #customTableHeader>
        <div class="mb-10px ml-10px">
          <RadioGroup
            button-style="solid"
            :size="'large'"
            v-model:value="langBtn"
            @change="handleModalSuccess"
          >
            <RadioButton :value="el.value" v-for="(el, index) in langList" :key="el.value"
              >{{ el.label }}
            </RadioButton>
          </RadioGroup>
        </div>
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { RadioGroup, RadioButton } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { getPromoRedenvelope } from '/@/api/activity';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { columns, schemas, useLocalList } from './index.data';
  import { useMemberStore } from '/@/store/modules/member';
  import { setStartformatDate, setEndformatDate } from '/@/utils/dateUtil';
  import { useFormSetting } from '/@/hooks/setting/useFormSetting';

  const FORM_SIZE = useFormSetting().getFormSize;
  const memberStore = useMemberStore();
  // 获取层级下拉
  memberStore.getLevelList();
  const langBtn = ref('zh_CN' as string);
  const localeList = useLocalList();
  const { t } = useI18n();
  const langList = localeList.map((item) => {
    return {
      label: item.country,
      value: item.event,
    };
  });

  const getPid = ref(null as any);
  const getName = ref('' as any);
  const [redEnvelopeModal, { closeModal }] = useModalInner((data) => {
    console.log(data);
    getPid.value = data.data.id;
    getName.value = data.data.zh_name;
  });
  const [trdEnvelopeTable, { reload }] = useTable({
    api: getPromoRedenvelope,
    columns: columns,
    showIndexColumn: false,
    bordered: true,
    useSearchForm: true,
    maxHeight: 450,
    formConfig: {
      schemas,
      showAdvancedButton: false,
      size: FORM_SIZE,
      actionColOptions: {
        class: 't-form-label-com',
        span: 2,
      },
      showResetButton: false,
    },
    beforeFetch: (params) => {
      params['pid'] = getPid.value;
      params['tongue'] = langBtn.value;
      if (params?.time?.length > 0) {
        params['st'] = params.time[0] ? setStartformatDate(params.time[0]) : null;
        params['et'] = params.time[1] ? setEndformatDate(params.time[1]) : null;
      }
      delete params.time;
      if (params.searchValue) {
        params[params.searchSelect] = params.searchValue;
      }
      delete params['searchValue'];
      delete params['searchSelect'];
      // params['st'] = '2024-02-13 00:00:00';
      // params['et'] = '2024-05-13 23:59:59';
    },
  });
  function handleModalSuccess(v) {
    //langBtn.value = v;
    reload();
  }
</script>
